<template>
  <div class="container">
    <el-dialog title="导入" :visible.sync="dialogShow" width="1000px">
      <div class="query-group">
        <el-form :inline="true">
          <el-form-item label="公司名称" class="mr20">
            <el-input placeholder="请输入关键字（模糊匹配）"></el-input>
          </el-form-item>
          <el-form-item label="职位名称">
            <el-input placeholder="请输入关键字（模糊匹配）"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker
              style="width: 240px"
              v-model="query.date"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <el-card class="item">
          <div class="checkbox fl mr30">
            <el-checkbox></el-checkbox>
          </div>

          <div class="upper">
            <div class="info">
              <div class="title">
                web前端
                <span class="f14 fn text-999 ml10">河南省投资集团有限公司</span>
              </div>
              <div class="limit">
                <span>本科及以上</span>
                <span>40岁以下</span>
                <span> 性别不限 </span>
                <span>计算机相关专业</span>
              </div>
            </div>

            <div class="rlght">
              <div class="f14 text-666">
                <span>2020-3-26发布</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        prev-text="上一页"
        next-text="下一页"
        layout="prev, pager, next, jumper"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        pageBackground="none"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  props: {},
  data() {
    return {
      dialogShow: false,
      query: {},
      total: 1,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
    };
  },
  // 方法
  methods: {
    show() {
      this.dialogShow = true;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.container {
  .list {
    margin-top: 20px;
    .item {
      .upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 16px;
          font-weight: bold;
          line-height: 21px;
          color: #333333;
        }
        .limit {
          font-size: 14px;
          font-weight: 400;
          line-height: 19px;
          color: #919191;
          margin-top: 15px;
          span {
            margin-right: 20px;
            border-right: 1px solid #e8e8e8;
            padding-right: 20px;
          }
          span:last-child {
            border: none;
          }
        }
        .rlght {
          text-align: center;
        }
      }
    }
  }
}
</style>